<!-- custom-tabbar.vue -->
<template>
	<view class="custom-tabbar">
		<view class="tabbar-container">
			<view class="tabbar">
				<view class="tab-indicator" :style="indicatorStyle"></view>
				<view v-for="(item, index) in tabList" :key="index" class="tab-item"
					:class="{ active: current === index }" @click="switchTab(item)">
					<view class="tab-icon">
						<text class="iconfont" :class="current === index ? item.selectedIcon : item.icon"></text>
						<text v-if="item.badge" class="tab-badge">{{ item.badge }}</text>
					</view>
					<view class="tab-text">{{ item.text }}</view>
				</view>
			</view>
			<view class="safe-area"></view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'custom-tabbar',
		props: {
			// Tab列表
			/* tabList: {
			   type: Array,
			   default: () => []
			 }, */
			// 当前激活的Tab索引
			current: {
				type: Number,
				default: 0
			},
			// 主题颜色
			themeColor: {
				type: String,
				default: '#3498db'
			},
			// 是否显示文字
			showText: {
				type: Boolean,
				default: true
			}
		},
		computed: {
			// 指示器样式
			indicatorStyle() {
				const tabWidth = 100 / this.tabList.length;
				const indicatorWidth = 60; // 指示器宽度

				return {
					width: `${indicatorWidth}rpx`,
					left: `calc(${this.current * tabWidth}% + (${tabWidth}% - ${indicatorWidth}rpx) / 2)`,
					backgroundColor: this.themeColor
				};
			}
		},
		data() {
			return {
				tabList: [{
						pagePath: "/pages/index/index",
						icon: "icon-home",
						text: "首页",
						selectedIcon: "icon-home-fill"
					},
					{
						pagePath: "/pages/package/index",
						icon: "icon-apps",
						text: "背包",
						selectedIcon: "icon-apps-fill"
					},
					{
						pagePath: "/pages/my/index",
						icon: "icon-cart",
						text: "我的",
						selectedIcon: "icon-cart-fill",
						badge: 5
					},
					/* {
						pagePath: "/pages/profile/profile",
						icon: "icon-user",
						text: "我的",
						selectedIcon: "icon-user-fill"
					} */
				]
			}
		},
		methods: {
			// 切换Tab
			switchTab(item) {
				uni.reLaunch({
					url:item.pagePath
				})
				// if (this.current === index) return;

				// this.$emit('tabChange', index);

				// 在实际使用中，可以在这里进行页面跳转
				// uni.switchTab({ url: this.tabList[index].pagePath });
			}
		}
	};
</script>

<style scoped>
	.custom-tabbar {
		position: relative;
		z-index: 9;
	}

	.tabbar-container {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		box-shadow: 0 -2rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.tabbar {
		display: flex;
		height: 60rpx;
		padding: 0 10rpx;
		position: relative;
	}

	.tab-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 8rpx 0;
		transition: all 0.3s ease;
		cursor: pointer;
		position: relative;
	}

	.tab-icon {
		position: relative;
		font-size: 22rpx;
		margin-bottom: 4rpx;
		transition: all 0.3s ease;
		color: #7d7e80;
	}

	.tab-text {
		font-size: 22rpx;
		transition: all 0.3s ease;
		color: #7d7e80;
	}

	.tab-item.active .tab-icon {
		color: v-bind(themeColor);
		transform: translateY(-2rpx);
	}

	.tab-item.active .tab-text {
		color: v-bind(themeColor);
		font-weight: 600;
	}

	.tab-indicator {
		position: absolute;
		top: 0;
		height: 3rpx;
		background: v-bind(themeColor);
		border-radius: 3rpx;
		transition: all 0.3s ease;
	}

	.tab-badge {
		position: absolute;
		top: -16rpx;
		right: -16rpx;
		background: #ff5a5f;
		color: white;
		font-size: 20rpx;
		min-width: 32rpx;
		height: 32rpx;
		line-height: 32rpx;
		text-align: center;
		border-radius: 16rpx;
		padding: 0 8rpx;
	}

	/* 安全区域适配 */
	.safe-area {
		height: constant(safe-area-inset-bottom);
		height: env(safe-area-inset-bottom);
		background: #fff;
	}

	/* 不显示文字时的样式 */
	.tabbar.no-text .tab-item {
		padding: 15rpx 0;
	}

	.tabbar.no-text .tab-text {
		display: none;
	}
</style>